<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>本地存储</title>
</head>

<body>
  <input type="text" name="username" value="" />
  <br />
  <input type="text" name="password" value="" />
  <br />
  <button id="btn">登录</button>
  <button class="register">注册</button>
  <script>
    alert('系统赠送的账户：1，密码：1')
    let obj = null
    obj = localStorage.getItem('userdata') ? JSON.parse(localStorage.getItem('userdata')) : obj = { account: '1', psd: '1' }
    localStorage.setItem('userdata', JSON.stringify(obj))
    let i = 3
    document.querySelector('#btn').addEventListener('click', () => {
      if (JSON.parse(localStorage.getItem('userdata')).account === document.querySelector('[name=username]').value && JSON.parse(localStorage.getItem('userdata')).psd === document.querySelector('[name=password]').value) {
        const time = () => {
          document.querySelector('#btn').innerHTML = `${i}秒后跳转`
          i--
          if (i === 0) {
            location.href = 'list.html'
          }
        }
        time()
        setInterval(time, 1000)
      } else {
        alert('登录失败，账户或者密码错误')
        //登录失败只清空密码，具体请参照QQ登录方式
        document.querySelector('[name=password]').value = ''
      }
    })
    document.querySelector('.register').addEventListener('click', () => {
      let account = prompt('请输入账户：')
      let psd = prompt('请输入密码：')
      obj = { account, psd }
      localStorage.setItem('userdata', JSON.stringify(obj))
    })
  </script>
</body>

</html>